<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				报价信息
			</div>
			<div >
				<el-row>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">询价客户：</span>
							<el-input disabled  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6" class="ml-[50px]">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">询价日期：</span>
							<el-select disabled  placeholder="请选择" class="flex-1 ml-[10px]">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">机器品牌：</span>
							<el-select disabled  placeholder="请选择" class="flex-1 ml-[10px]">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6" class="ml-[50px]">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">机器型号：</span>
							<el-select disabled  placeholder="请选择" class="flex-1 ml-[10px]">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">公司是否做过：</span>
							<el-select disabled  placeholder="请选择" class="flex-1 ml-[10px]">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6" class="ml-[50px]">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">产品类型：</span>
							<el-select disabled  placeholder="请选择" class="flex-1 ml-[10px]">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品图片" prop="scene_name" align="center" >
					<template #default="{ row }">
						<el-image style="width: 48px; height: 48px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>超级好吃的巧克力</span>
					</template>
				</el-table-column>
				<el-table-column label="产品型号" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>SJD-880</span>
					</template>
				</el-table-column>
				<el-table-column label="需求数量" prop="上海AAAA有限公司" align="center" width="100px">
					<template #default="{ row }">
						<span>32</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('InquiryManagement.InquiryManagement/record'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">查看报价</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('InquiryManagement.InquiryManagement/HistoricalQuotation'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">历史报价</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">索要产品参数</span>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">索要产品外形图</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>	
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">保存</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		}, 
	])
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
</script>

<style>
</style>